<template>
  <a-drawer
    :title="title"
    :closable="false"
    :maskClosable="false"
    :width="800"
    :visible="visible"
    :confirmLoading="confirmLoading"
  >
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-row :gutter="24">
          <a-col :md="24" :sm="24">
            <a-form-item label="所属学院" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback forceRender="true">
              <a-select
                show-search
                allowClear
                placeholder="请选择所属学院"
                :filterOption="filterOption"
                v-decorator="['collId', { rules: [{ required: true, message: '请选择所属学院！' }] }]"
                :disabled="collSwitch"
              >
                <a-select-option v-for="item of this.collList" :key="item.id">
                  {{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="24" :sm="24">
            <a-form-item label="工号" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input
                placeholder="请输入工号"
                v-decorator="['userNum', { rules: [{ required: true, message: '请输入工号！' }] }]"
                :disabled="id != ''"
              />
            </a-form-item>
          </a-col>
          <a-col :md="24" :sm="24">
            <a-form-item label="账号" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
              <a-input
                placeholder="请输入账号"
                v-decorator="[
                  'account',
                  { rules: [{ required: true, min: 5, message: '请输入至少五个字符的账号！' }] },
                ]"
                :disabled="id != ''"
              />
            </a-form-item>
          </a-col>
          <a-col :md="24" :sm="24">
            <a-form-item label="姓名" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
              <a-input
                placeholder="请输入姓名"
                v-decorator="['name', { rules: [{ required: true, message: '请输入姓名！' }] }]"
              />
            </a-form-item>
          </a-col>
          <a-col :md="24" :sm="24">
            <a-form-item label="昵称" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
              <a-input placeholder="请输入昵称" v-decorator="['nickName']"/>
            </a-form-item>
          </a-col>
          <a-col :md="24" :sm="24">
            <a-form-item label="生日" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
              <a-date-picker
                placeholder="请选择生日"
                style="width: 100%"
                v-decorator="['birthday']"
                :format="dateFormat"
              />
            </a-form-item>
          </a-col>
          <a-col :md="24" :sm="24">
            <a-form-item label="性别" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-radio-group v-decorator="['sex']">
                <a-radio :value="1">男</a-radio>
                <a-radio :value="2">女</a-radio>
                <a-radio :value="3">未知</a-radio>
              </a-radio-group>
            </a-form-item>
          </a-col>
          <a-col :md="24" :sm="24">
            <a-form-item label="院系管理员" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-radio-group v-decorator="['ldrFlag']">
                <a-radio value="0">否</a-radio>
                <a-radio value="1">是</a-radio>
              </a-radio-group>
            </a-form-item>
          </a-col>
          <a-col :md="24" :sm="24">
            <a-form-item label="手机号" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
              <a-input
                placeholder="请输入手机号"
                v-decorator="['phone', { rules: [{ required: true, message: '请输入手机号！' }] }]"
              />
            </a-form-item>
          </a-col>
          <a-col :md="24" :sm="24">
            <a-form-item label="邮箱" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
              <a-input placeholder="请输入邮箱" v-decorator="['email']"/>
            </a-form-item>
          </a-col>
          <a-col :md="24" :sm="24">
            <a-form-item label="电话" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
              <a-input placeholder="请输入电话" v-decorator="['tel']"/>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-spin>
    <div class="drawer-footer">
      <a-button class="left" @click="handleCancel"> 关闭</a-button>
      <a-button class="right" type="primary" @click="handleSubmit"> 提交</a-button>
    </div>
  </a-drawer>
</template>

<script>
  import { sysUserAdd, sysUserEdit } from '@/api/modular/system/userManage'
  import moment from 'moment'
  import { sysCollegeList } from '@/api/modular/system/sysCollegeManage'
  import store from '@/store'

  export const dateFormat = 'YYYY-MM-DD'
  export default {
    data() {
      return {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 6 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 }
        },
        visible: false,
        confirmLoading: false,
        form: this.$form.createForm(this),
        id: '',
        title: '',
        collList: [],
        collSwitch: false
      }
    },
    created() {
    },
    methods: {
      getCollList() {
        sysCollegeList().then((res) => {
          if (res.success) {
            this.collList = res.data
          }
        })
      },
      // 初始化方法
      open(record) {
        this.getCollList()
        if (record) {
          this.id = record.id
          this.title = '编辑教师信息'
          this.collSwitch = true
          setTimeout(() => {
            this.form.setFieldsValue({
              id: record.id,
              account: record.account,
              name: record.name,
              nickName: record.nickName,
              birthday: record.birthday?moment(record.birthday, dateFormat):'',
              sex: record.sex,
              phone: record.phone,
              email: record.email,
              tel: record.tel,
              userNum: record.userNum,
              collId: record.collId,
              ldrFlag: record.ldrFlag
            })
          }, 100)
        } else {
          this.id = ''
          this.title = '新增教师信息'
          if (store.getters.admintype != '1') {
            this.collSwitch = true
            setTimeout(() => {
              this.form.setFieldsValue({
                collId: store.getters.userInfo.collId
              })
            }, 100)
          } else {
            this.collSwitch = false
          }
        }
        this.visible = true
      },
      handleSubmit() {
        const {
          form: { validateFields }
        } = this
        this.confirmLoading = true
        validateFields((errors, values) => {
          if (!errors) {
            console.log(values)
            const data = { ...values }
            delete data.birthday
            const birthday = values.birthday ? moment(values.birthday).format(dateFormat) : ''
            data.birthday = birthday
            if (this.id) {
              data.id = this.id
              sysUserEdit(data)
                .then((res) => {
                  if (res.success) {
                    this.$message.success('更新教师信息成功')
                    this.confirmLoading = false
                    this.$emit('ok', data)
                    this.handleCancel()
                  } else {
                    this.$message.error('更新教师信息失败：' + res.message)
                  }
                })
                .finally((res) => {
                  this.confirmLoading = false
                })
            } else {
              data.userType = 'tch'
              sysUserAdd(data)
                .then((res) => {
                  if (res.success) {
                    this.$message.success('新增教师信息成功')
                    this.confirmLoading = false
                    this.$emit('ok', data)
                    this.handleCancel()
                  } else {
                    this.$message.error('新增教师信息失败：' + res.message)
                  }
                })
                .finally((res) => {
                  this.confirmLoading = false
                })
            }
          } else {
            this.confirmLoading = false
          }
        })
      },
      handleCancel() {
        this.form.resetFields()
        this.visible = false
      },
      filterOption(input, option) {
        return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      }
    }
  }
</script>
